<template>
  <div class="input-wrap">
    <div v-show="!edit" class="value" @click="handleEdit">
      <span>{{ input }}</span>
      <i class="el-icon-edit" />
    </div>
    <el-input
      v-show="edit"
      ref="input"
      v-model="value"
      style="width: 180px!important;"
      class="input"
      type="text"
      @blur="handleBlur"
      @keyup.enter.native="handleBlur"
      @change="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: 'ClickToEditInput',
  props: {
    input: String
  },
  data() {
    return {
      edit: false,
      value: ''
    }
  },
  watch: {
    input(val) {
      this.value = val
    }
  },
  mounted() {
    this.value = this.input
  },
  methods: {
    handleEdit() {
      this.edit = true
      this.$nextTick(() => {
        this.$refs.input.$el.getElementsByTagName('input')[0].focus()
      })
    },
    handleChange() {
      this.$emit('change', this.value)
    },
    handleBlur() {
      this.edit = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .input-wrap {
    height: 40px;
  }
  .input {
    height: 32px;
  }
  .value {
    height: 40px;
    display: flex;
    align-items: center;
  }

  .el-icon-edit {
    margin-left: 10px;
    color: #00acff;
    font-size: 14px;
  }

</style>
